<template>
  <div>
    <div class="pane" v-show="show">
      <slot>我是pane的内容内容内容</slot>
    </div>
  </div>
</template>



<script>
export default {
  name: 'pane',
  props: {
    //唯一的值来标识具体是哪个pane
    name: {
      type: String,
    },
    label: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
      show: true
    }
  },
  watch: {
    label () {
      this.updateNavChild()
    }
  },
  mounted () {
    /* 一进来就调父组件方法告诉pane标签label更新了 */
    this.updateNavChild() //同时监听了label，在label更新时同样调用
  },
  methods: {
    /* 调用父组件的方法来改变tab-bar标题 */
    updateNavChild () {
      this.$parent.updateNav()//直接访问父组件的事例以及方法，这里没有用vuex所以使用了$parent
    }
  }
}
</script>
